<template>
  <div>
    <div id='code'></div>
    <canvas
      id="canvas"
      ref="canva"
    ></canvas>
    <el-input v-model="msg"></el-input>
    <button @click="useqrcode(msg)">dianji

    </button>
  </div>
</template>

<script>
// import QRCode from "qrcodejs2"; // 引入qrcode
// import QRCode from "qrcodejs2";
import QRCode from "qrcode";
export default {
  data() {
    return {
      msg: ""
    };
  },
  mounted() {
    this.useqrcode(msg);
  },
  methods: {
    useqrcode(v) {
      //  定义画布
      let canvas = this.$refs.canva;
      QRCode.toCanvas(canvas, v, function(error) {
        if (error) console.error(error);
        console.log("success!");
      });
    }
  }
};
</script>

<style lang='less'>
#qrcode {
  //图片有白边填充css
  display: inline-block;
  img {
    width: 132px;
    height: 132px;
    background-color: #fff; //设置白色背景色
    padding: 6px; // 利用padding的特性，挤出白边
  }
}
</style>